<template>
  <div class="headerBox">
    <div class="wp1080 header">
      <el-row>
        <el-col :span="8">
          <div class="grid-header">
            <img class="imgBj fl" src="../../static/img/header.png" alt="">
          </div>
          <!--<span style="font-size: 16px">游戏虫下载</span>-->
        </el-col>
        <el-col :span="10">
          <div class="">
            <ul class="navHeader">
              <li>
                <router-link :to="{ name:'homes', params: {} }">
                  首页
                </router-link>
                <span class="line"></span>
              </li>
              <li>
                <router-link :to="{ name:'breaks', params: {} }">
                  汉化破解
                </router-link>
                <span class="line"></span>
              </li>
              <li>
                <router-link :to="{ name:'online', params: {} }">
                  网络游戏
                </router-link>
                <span class="line"></span>
              </li>
              <li>
                <router-link :to="{ name:'BTgame', params: {} }">
                  BT网游
                </router-link>
                <span class="line"></span>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="6">
          <div class=" ">
            <el-input placeholder="请输入内容" v-model="search" @keyup.enter.native="toSearch(search)">
              <el-button slot="append" icon="el-icon-search" @click="toSearch(search)"></el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
export default {
  name: 'Headers',
  data () {
    return {
      search: ''
    }
  },
  computed: {
    onRoutes () {
      return this.$route.path
    }
  },
  methods: {
    toSearch () {
      console.log(this.search)
      if (this.search.length === 0) {
        this.$message.error('请输入您要搜索的关键词')
      } else {
        this.$router.push({path: '/search', query: { text: this.search }})
      }
    }
  }
}
</script>
<style scoped>
  .headerBox{
    width: 100%;
    background: #fff;
  }
  .header{
    height: 90px;
    line-height: 90px;
    box-sizing: border-box;
  }
  .grid-header img{
    height: 78px;
    width: 268px;
  }
  .imgBj{

  }
  .navHeader{
    display: flex;
    flex-direction: row;
    list-style: none;
  }
  .navHeader li{
    text-decoration: none;
    line-height: 23px;
    padding-top: 34px;
    color: rgba(115, 115, 115, 1);
    font-size: 16px;
    text-align: left;
    font-family: Roboto;
    margin-right:20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .navHeader li a{
    text-decoration: none;
    color: #737373;
  }
  .navHeader li .list-active+.line{
    display:inline-block;
    width: 100%;
    height: 4px;
    background: #009688;
    border-radius: 4px;
  }
  .navHeader li .line{
    display:none;

  }
  .navHeader li .list-active{
    color: #009688;
  }

</style>
